import React from 'react'
import styles from './index.module.scss'
export default  function HouseInfo ({tags, title, price, roomType, size, oriented, floor}) {
    const info_bottom_data = [
        { title: '装修', value: '精装' },
        { title: '朝向', value: oriented && oriented.join(',') },
        { title: '楼层', value: floor },
        { title: '类型', value: '普通住宅' },
      ]
    return (
        <div className={styles.info}>
            <div className={styles.info_header}> 
                <h3>{title}</h3>
                <div className={styles.info_header_tags}>
                    {tags && tags.map(item => <span key={item}>{item}</span>)}
                </div>
            </div>    
            <div className={styles.info_main}>
                <div className={styles.info_main_item}>
                    <p>{price}</p>
                    <span>租金</span>
                </div>
                <div className={styles.info_main_item}>
                    <p>{roomType}</p>
                    <span>三室</span>
                </div>
                <div className={styles.info_main_item}>
                    <p>{size}平米</p>
                    <span>面积</span>
                </div>
            </div>
            <div className={styles.info_bottom}>
                {info_bottom_data.map((item) => (
                    <div key={item.title} className={styles.info_bottom_item}>
                    <span>{item.title}：</span>
                    <span>{item.value}</span>
                    </div>
                 ))}
            </div>
        </div>
    )
  }
